<template>
    <div style="height: 100%">
        <el-amap :center="center" :zoom="zoom" :plugin="plugin" :events="events">
            <el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
            <el-amap-circle :center="marker.position" :radius="80" :fill-opacity="0.4" fillColor="#38f" strokeColor="#38f"></el-amap-circle>
        </el-amap>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                center:[116.404713,39.904846],
                zoom: 8,
                events: {
                    init: (e) => {
                        this.$emit("getOption",this.center)
                    },
                    'click': (e) => {
                        this.marker.position=[e.lnglat.lng,e.lnglat.lat]
                        this.center=[e.lnglat.lng,e.lnglat.lat]
                        this.$emit("getOption",this.marker.position)
                    }
                },
                plugin: [
                    {
                        pName: 'ToolBar',
                        events: {
                            init(instance) {
                                console.log(instance);
                            }
                        }
                    },
                    {
                        pName: 'MapType',
                        defaultType: 0,
                    },
                    {
                        pName: 'Scale',
                        events: {
                            init(instance) {
                                console.log(instance);
                            }
                        }
                    },
                    {
                        pName: 'OverView',
                        events: {
                            init(instance) {
                                console.log(instance);
                            }
                        }
                    }
                ],
                marker:{
                    position:[116.404713,39.904846],
                    visible:true,
                    draggable:true,
                    events:{
                        dragend: (e) => {
                            this.marker.position = [e.lnglat.lng, e.lnglat.lat];
                            this.center=[e.lnglat.lng,e.lnglat.lat]
                            this.$emit("getOption",this.marker.position)
                        }
                    }
                },
            }
        },
        methods:{
            setOption(arr){
                this.center = arr
                this.marker.position=arr
                this.$emit("getOption",arr)
            }
        }
    }
</script>

